<template>
  <div class="ticket-page">
    <div class="nav-bar" style="background: #FFFFFF">
      <div class="nav-status" :style="{height:statusH + 'px'}"></div>
      <div class="nav-head flex-center" :style="{height:titleH + 'px'}">
        <div class="flex-1 flex-row-v-center" style="padding-left: 10px;">
          <img style="width: 22px;height: 22px" src="/static/assets/img/icon/icon-arrow-left.png"
               @click="onClickGoBack()"/>
        </div>
        <div class="flex-1 flex-center">
          <span style="font-size: 18px; color:#000000">我的优惠券</span>
        </div>
        <div class="flex-1"></div>
      </div>
    </div>
    <div class="ticket-container flex-col" :style="{'padding-top':titleH + statusH + 'px'}">
      <div class="clear-10"></div>
      <div class="switch-bar flex-row-space-between">
        <div class="switch-item flex-1" :class="{ 'active' : currentStatus === item.status}"
             v-for="item in statusList" :key="item.status" @click="switchStatus(item.status)">
          {{item.label}}
        </div>
      </div>
      <div class="flex-1 flex-col flex-center">
        <div class="empty-div flex-col-v-center">
          <img src="/static/assets/img/empty-ticket.png" class="empty-img"/>
          <label class="empty-text">暂无优惠券</label>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import global from 'global'
  import Core from 'core'
  import Common from 'common'

  export default {
    data () {
      return {
        statusH: global.state.statusH,
        titleH: global.state.titleH,

        statusList: [
          {
            label: '未使用',
            status: 1
          },
          {
            label: '已使用',
            status: 2
          },
          {
            label: '已过期',
            status: 3
          }
        ],
        currentStatus: 1,
        page: 1,
        orderList: [1, 2, 34, 5, 6, 7]
      }
    },

    methods: {
      onClickGoBack () {
        Core.Util.goBack()
      },

      switchStatus (status) {
        if (status === this.currentStatus) return
        this.currentStatus = status
        console.log(this.currentStatus)
      },

      getNextList () {
        console.log('getNextList')
        let page = this.page
        if (page < 0) {

        } else {
          page += 1
          this.getOrderList(page)
        }
      },

      async getOrderList (page = 1) {
        console.log(page)
        let oldList = page === 1 ? [] : this.orderList
        let newList = []
        this.list = oldList.concat(newList)
        this.page = page
      }

    }
  }
</script>

<style lang="scss" scoped>
  .ticket-page {
    background: #f9f9f9;
    height: 100%;

    .ticket-container {
      .w-100 {
        width: 100%;
      }
      height: 100%;
      .switch-bar {
        height: 55px;
        border-bottom: 1px solid RGBA(130, 130, 130, .2);
        background: #ffffff;
        .switch-item {
          position: relative;
          font-size: 16px;
          color: #313131;
          text-align: center;
          line-height: 55px;
          &.active {
            color: #0DC5A9;
            &:after {
              height: 2px;
              width: 50px;
              background: #0DC5A9;
              display: block;
              content: '';
              position: absolute;
              bottom: 0;
              left: calc(50% - 25px);
            }
          }
        }
      }
      .empty-div {
        margin-top: -30%;
        .empty-img {
          width: 167px;
          height: 138px;
          margin-bottom: 20px;
        }
        .empty-text {
          margin-bottom: 20px;
          color: #939393;
          font-size: 16px;
        }
      }

    }

    .bg-white {
      background: white;
    }
  }
</style>
